<template>
  <div class="top_box">
        <!-- 标题 -->
        <div class="_Rimg_box">
      <p class="_Rtxt">发现频次最多top10物种</p>
      <p class="_Mtxtss">Top10 most frequently found Species</p>
    </div>
    <!-- 图表 -->
    <div class="top_echart">
      <mychart id="top" :option="option" width="4.5rem" height="2.62rem"></mychart>
    </div>
  </div>
</template>

<script>
import mychart from './mychart.vue';
import * as echarts from 'echarts';
export default {
  components: { mychart },
  props:["topTen"],
  data() {
    return {
      Ten:this.topTen,
      option:{}
    }
  },
  created() {
    
  },
  mounted() {
    this.getdata()
  },
  methods: {
   getdata(){
        let x = [], y = [];
          for (let key in  this.Ten) {
            x.push(key);
            y.push( this.Ten[key])
          }
          this.drawbar3(x , y)
  },
  drawbar3(x, y) {
    this.option  = {
        grid: {
          top: '5%',
          right: '0%',
          left: '0%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [{
          type: 'category',
          // data: ['果子狸' , '灰胸竹鸡','白鹇' , '紫啸鸫' , '豹猫','赤腹松鼠','赤麂' ,'野猪','黑领噪鹃','鼬獾'] ,
          data: x,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          },
          axisTick: {
            // 坐标轴 刻度
            show: false, // 是否显示
            inside: false, // 是否朝内
            length: 3, // 长度
          },
          axisLabel: {
            margin: 10,
            color: '#e2e9ff',
            rotate: '45',
              fontSize: ".16rem",
              show: true,
              color: "rgba(255, 255, 255, 0.80)",
              fontfamily: "PingFang",
     
          },
        }],
        yAxis: [{
          axisLabel: {
            formatter: function (value) {
              return value + '';
            },
            color: 'rgba(255, 255, 255, 0.80)',
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          }
        }],
        series: [{
          type: 'bar',
          // data:  [310,365,7448,1802,645,779, 727,1387,434,5347 ],
          data:  y,
          barWidth: 12,
          showBackground: true,
          itemStyle: {
            color: {
              type: "linear",
              x: 0, // 若将此值设为1，表示从右到左渐变
              y: 1, // 若将此值设为1，表示从上到下渐变
              x2: 0, // 左
              y2: 0, // 上
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0,244,255,0)', // 0% 处的颜色
                },
                {
                  offset: 0.1,
                  color: 'rgba(99, 103, 186 , 0)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(145, 127, 255)', // 90% 处的颜色
                },
              ],
            },
          },
          label: {
            show: false,
    
              lineHeight: 30,
              width: 80,
              height: 30,
              rich: {
                d: {
                  color: '#3CDDCF',
                },
                a: {
                  color: '#fff',
                  align: 'center',
                },
                b: {
                  width: 1,
                  height: 30,
                  borderWidth: 1,
                  borderColor: '#234e6c',
                  align: 'left'
                },
              }
        
          }
        }]
      }
  }
  },

}
</script>

<style>
@import "../../../static/newcss/myTop.css";
</style>